<template>
  <div>
    <div v-if="!isEdit">
      <span>{{msg}}</span>
      <button @click="fn">编辑</button>
    </div>
    <div v-else>
      <input type="text" class="ipt">
      <button @click="isEdit = false">确认</button>
    </div>
    <div>
      {{count}}
      <button @click="fn2">修改</button>
    </div>
  </div>
</template>

<script>
// vue的异步更新--$nextTick
export default {
  data() {
    return {
      isEdit: false,
      msg: '大标题',
      count: 1
    }
  },
  // 页面dom更新是一个异步操作
  methods: {
    fn(){
      //  // 这一句话，是将data里面的数据 修改为true。 但是背后的随着数据修改，页面也会更新
      // 但是 页面更新是一个异步操作，这是vue专门做的一个优化, 会将页面更新的操作放到事件队列里面去，
      this.isEdit = true
      // console.log(document.querySelector('.ipt'));
      this.$nextTick(() => {
        // 在代码里面想获取更新后的dom， 就写在 $nextTick的回调函数里面
        console.log(document.querySelector('.ipt'));
      })

setTimeout(() => {
  // 也是等dom更新完了以后，在执行
  console.log(document.querySelector('.ipt'));
}, 0);
    },
    fn2(){
      //下面代码看起来是 将页面更新了6次，但是页面更新是异步的，vue会收集所有导致页面更新的操作，放到事件队列里面
      // 统一更新，只会更新一次
      this.count++
      this.count++
      this.count++
      this.count++
      this.count++
    }
  }
}
</script>